<template>
    <view class="bindtel">
        <view class="minela">
            <input type="text" v-model="userNum" placeholder="请您输入手机号码（中国大陆）" maxlength="11" />
        </view>
        <view class="minela macl">
            <input type="text" placeholder="请您输入验证码" v-model="verifyCode" />
            <text @tap="getPhonecode">{{codeBtn.codeText}}</text>
        </view>
        <view class="minela">
            <input type="password" v-model="loginpsd" placeholder="请您登录密码" maxlength="11" />
        </view>
        <view class="okbinding" @click="regisFn">
            确认绑定
        </view>
    </view>
</template>

<script>
    let uinfo;
    import request from "../../untils/request.js";
    export default {
        data() {
            return {
                userNum: '',
                verifyCode: '',
                loginpsd:'',
                rules: {
                    userNum: {
                        rule: /(^[\w.\-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,3}$)|(^1[3|4|5|6|7|8|9]\d{9}$)/,
                        msg: "手机号或邮箱格式错误",
                    },
                    verifyCode: {
                        rule: /^[0-9]/,
                        msg: "请输入验证码或格式错误",
                    },
                },
                //验证码按钮
                codeBtn: {
                    codeTime: 60,
                    codeText: "获取验证码",
                    codeStatus: true,
                },
            }
        },
        onLoad() {
            uinfo = uni.getStorageSync('userInfo');
        },
        methods: {
            //绑定手机号
            regisFn() {

                if (!this.validate("userNum")) return;
                if (!this.validate("verifyCode")) return;
                if(this.loginpsd==''){
                    return uni.showToast({
                            icon: "none",
                            title: '请输入登录密码',
                        });
                }
                let telEmail = '0';
                if (this.userNum.indexOf('@') == -1) {
                    telEmail = '0';
                } else {
                    telEmail = '1';
                }
                uni.showLoading({
                    mask:true
                });
                request.postLoginris('/user/info/updateMobileEmail', {
                    accountNumber: this.userNum, //手机号 ,
                    accountType: '0',
                    verifyCode: this.verifyCode, //验证码
                    businessType: '3',
                    userId: uinfo.userId,
                    password:this.loginpsd,
                    pwdType:0
                }).then(res => {
                    if (res.code == '200') {
                        uni.hideLoading();
                        uni.showToast({
                            icon: "none",
                            title: res.message,
                        });
                        setTimeout(function() {
                            uni.switchTab({
                                url: '/pages/mine/mine',
                            });
                        }, 1000)
                    } else {
                        uni.hideLoading();
                        uni.showToast({
                            icon: "none",
                            title: res.message,
                        });
                    }
                })
            },
            //获取验证码
            getPhonecode() {
                //0手机号，1邮箱
                let telEmail = '0';
                if (this.userNum.indexOf('@') == -1) {
                    telEmail = '0';
                } else {
                    telEmail = '1';
                }
                if (this.validate("userNum") && this.codeBtn.codeStatus) {
                    this.codeBtn.codeStatus = false;
                    let timerId = setInterval(() => {
                        let codetime = this.codeBtn.codeTime;
                        codetime--;
                        this.codeBtn.codeTime = codetime;
                        this.codeBtn.codeText = "剩余" + codetime + "秒";
                        if (codetime < 1) {
                            clearInterval(timerId);
                            this.codeBtn.codeText = "重新获取";
                            this.codeBtn.codeTime = 60;
                            this.codeBtn.codeStatus = true;
                        }
                    }, 1000);
                    request.postMember('/user/login/sendVerifiyCode', {
                        accountNumber: this.userNum,
                        businessType: '3',
                        accountType: telEmail
                    }).then(res => {
                        console.log(res)
                        if (res.code == "200") {
                            
                            uni.showToast({
                                icon: "none",
                                title: '发送成功',
                            });
                        } else {
                            uni.showToast({
                                icon: "none",
                                title: res.message,
                            });
                        }
                    })
                }
            },
            validate(key) {
                let bool = true;
                if (!this.rules[key].rule.test(this[key])) {
                    //提示信息
                    uni.showToast({
                        icon: "none",
                        title: this.rules[key].msg,
                    });
                    //取反
                    bool = false;
                    return false;
                }
                return bool;
            },
        }
    }
</script>

<style>
    .bindtel {
        background-color: #F5F5F5;
        height: 90vh;
        padding: 46rpx 0 0 0;
    }

    .minela {
        width: 680rpx;
        background: #FFFFFF;
        height: 108rpx;
        margin: 0 auto 20rpx;
        border-radius: 6px;
        padding: 0 10px;
        display: flex;
        align-items: center;
    }

    .macl {
        justify-content: space-between;
    }

    .minela input {
        width: 400rpx;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
    }

    .minela text {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #7F6AC3;
        border-left: 1px solid #ADB0BB;
        padding: 0 0 0 30px;
    }

    .okbinding {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 38px;
        color: #FFFFFF;
        width: 355px;
        height: 38px;
        background: #7F6AC3;
        border-radius: 19px;
        text-align: center;
        margin: 100px auto 0;
    }
</style>
